<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">系统配置</h3>
                </div>
                <div class="box-body">
                  <section class="content" id="departEmployees">
                    <div class="row">
                      <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
                        <el-tab-pane v-for='category in this.categories' :label="category.description" :name="category.name" :key='category.name'>
                          <div class="box-tools pull-left">
                            <el-button type="success" v-if="util.hasRole(4)" @click="()=>addVisible=true">
                              <i class='fa fa-plus'>添加配置项</i>
                            </el-button>
                          </div>
                          <div class="row">
                            <el-table stripe :empty-text="emptyText" :row-key='value' :highlight-current-row='true' :data="configs" border>
                              <el-table-column type='index' label="序号" :width='80'></el-table-column>
                              <!-- <el-table-column label="值" :width='100' :prop='value'></el-table-column> -->
                              <el-table-column label="描述" :width='500' :prop='description'></el-table-column>
                              <el-table-column label="操作" width="320">
                                <template scope="scope">
                                      <el-button type="primary" v-if="util.hasRole(4)" @click="editRow(scope.row)">
                                        <i class="fa fa-edit">编辑</i>
                                      </el-button>
                                      <el-button type="primary" v-if="util.hasRole(4)" @click="up(scope.row)">
                                        <i class="fa fa-edit">上移</i>
                                      </el-button>
                                      <el-button type="primary" v-if="util.hasRole(4)" @click="down(scope.row)">
                                        <i class="fa fa-edit">下移</i>
                                      </el-button>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title='设置配置信息' v-if='editVisible' :visible.sync="editVisible" :modal="true"  :before-close="() => editVisible = false"  size="small">
      <SysItemConfig ref="editCfg" v-if='editVisible' :caption="caption" :config="selectRow.description"></SysItemConfig>
      <span slot="footer" class="dialog-footer">
        <el-button @click="()=>editVisible = false">关 闭</el-button>
        <el-button type="primary" @click="updateConfig">更 新</el-button>
      </span>
    </el-dialog>

    <el-dialog title='新增配置信息' v-if='addVisible' :visible.sync="addVisible" :modal="true"  :before-close="() => addVisible = false" size="small">
      <SysItemConfig ref="addCfg" v-if='addVisible' :caption="caption"></SysItemConfig>
      <span slot="footer" class="dialog-footer">
        <el-button @click="()=>addVisible = false">关 闭</el-button>
        <el-button type="primary" @click="addConfig">添 加</el-button>
      </span>
    </el-dialog>
  </div>    
</template>
<script>
import sysConfigUtil from "../../common/sysConfigUtil";
import Utils from "../../common/utils";
import SysItemConfig from "../mycomponents/SysItemConfig"
let cnfUtil = new sysConfigUtil();
let util = new Utils();
export default {
  name: "SysConfig",
  components: {
    SysItemConfig
  },
  data() {
    return {
      emptyText: "空",
      value: "value",
      caption:'',
      util: util,
      description: "description",
      columns: cnfUtil.getColumns(),
      activeName: "",
      name: "",
      categories: [],
      configs: [],
      addVisible:false,
      editVisible:false,
      selectRow:null
    };
  },
  created: function() {
    this.$nextTick(() => {
      this.listCategries();
    });
  },
  methods: {
    getEmptyText() {
      return "空";
    },
    showSucInfo(info) {
      this.$message({
        message: info,
        type: "info"
      });
    },
    showErrorInfo(info) {
      this.$message({
        message: info,
        type: "error"
      });
    },
    handleTabClick(tab, event) {
      console.log(tab, event)
      var field = tab.name
      this.caption = tab.label
      this.getConfig(field)
    },
    updateConfig(){
      var that = this
      if(!this.$refs.editCfg.getData()){
        return
      }

      for (var index in this.configs){
        if(this.configs[index].value == this.selectRow.value){
          this.configs[index].description = this.$refs.editCfg.getData()
          break
        }
      }

      var cfg = {
        "name": this.activeName,
        "configs":this.configs
      }
      cnfUtil.updateConfig(cfg,(response)=>{
        cnfUtil.listAll()
        that.getConfig(that.activeName)
        that.editVisible = false
      }, (response)=>{
        that.showErrorInfo("更新配置失败！");
      })
    },
    addConfig() {
      var that = this
      if(!this.$refs.addCfg.getData()){
        return
      }
      this.configs.push(
        {
          "description": this.$refs.addCfg.getData()
        }
      )
      var cfg = {
        "name": this.activeName,
        "configs":this.configs
      }
      cnfUtil.updateConfig(cfg,(response)=>{
        cnfUtil.listAll()
        that.getConfig(that.activeName)
        that.addVisible = false
      }, (response)=>{
        that.showErrorInfo("添加配置失败！");
      })
    },
    editRow(row) {
      console.log('up data:' + JSON.stringify(row))
      this.selectRow = row
      this.editVisible = true
    },
    up(row) {
      console.log('up data:' + JSON.stringify(row))
      var row_index = this.find_item(row)
      if(row_index > 0 && row_index < this.configs.length){
        this.swap(this.configs,row_index,row_index-1)
      }
      var cfg = {
        "name": this.activeName,
        "configs":this.configs
      }
      var that = this
      cnfUtil.updateConfig(cfg,(response)=>{
        cnfUtil.listAll()
        that.getConfig(that.activeName)
      }, (response)=>{
        that.showErrorInfo("添加配置失败！");
      })
    },
    down(row) {
      console.log('down data:' + JSON.stringify(row))
      var row_index = this.find_item(row)
      if(row_index >= 0 && row_index < this.configs.length){
          this.swap(this.configs,row_index,row_index+1)
      }
      var cfg = {
        "name": this.activeName,
        "configs":this.configs
      }
      var that = this
      cnfUtil.updateConfig(cfg,(response)=>{
        cnfUtil.listAll()
        that.getConfig(that.activeName)
      }, (response)=>{
        that.showErrorInfo("添加配置失败！");
      })
    },
    find_item(row){
        for(var index=0;index < this.configs.length;index++){
            if(this.configs[index].value == row.value){
                return index;
            }
        }
        return -1;
    },
    swap(array,sup,sdown){
        var item = array[sup]
        array[sup]=array[sdown]
        array[sdown]=item
    },
    getConfig(field) {
      var that = this;
      cnfUtil.getConfig(
        field,
        response => {
          that.configs = response.body.body;
        },
        response => {
          if (response.body.result == 2) {
            that.showErrorInfo("权限不够,请联系管理员！");
          } else that.showErrorInfo("加载数据出错,请刷新重新加载！");
        }
      );
    },
    listCategries() {
      var that = this;
      cnfUtil.listCategory(
        response => {
          that.categories = response.body.body;
          that.activeName = that.categories[0].name;
          that.caption = that.categories[0].description
          that.getConfig(that.activeName);
        },
        response => {
          that.showErrorInfo("加载数据出错,请刷新重新加载！");
        }
      );
    }
  }
};
</script>